<template>
  <el-image v-if="imgSrc" class="image-container" :src="imgSrc" :preview-src-list="previewList">
    <div slot="error" class="image-slot">
      <i class="el-icon-picture-outline" />
    </div>
  </el-image>
  <div v-else class="default-bg" />
</template>

<script>
export default {
  name: 'CustomImage',
  // eslint-disable-next-line vue/require-prop-types
  props: {
    imageId: {
      type: [String, Number],
      default: ''
    },
    list: {
      type: Array,
      default: null
    }
  },
  data() {
    return {}
  },
  computed: {
    // imgSrc() {
    //   return this.imageId ? `${process.env.BASE_API}/base/attachment/files/id/${this.imageId}` : ''
    // },
    previewList() {
      return this.list ? this.list : this.imgSrc ? [this.imgSrc] : []
    }
  }
}
</script>
<style lang="scss" scoped>
  .image-container{
    position: relative;
  }
  .image-container, .default-bg{
    width: 200px;
    height: 100px
  }
</style>
<style lang="scss">
.image-slot{
  width: 100%;
  height: 100%;
  font-size: 28px;
  display: flex;
  background: #f2f2f2;
  justify-content: center;
  align-items: center
}
</style>
